<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="{$system.logo}">
    <link href="__PUBLIC__/dist/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="__PUBLIC__/dist/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="__PUBLIC__/dist/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <!-- Data Tables -->
    <link href="__PUBLIC__/dist/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/dist/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
	<style type="text/css">
		.smallImg{
			height:34px
		}
		.text {
			padding-top: 6px;
		}
		input[type="number"] {
			-moz-appearance: textfield;
		}
		#ajax_index_box{
			overflow: scroll;
		}
	</style>
	<block name="css"></block>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content" style="border-color: #e7eaec;border-width: 4px 0 0;">
					<div class="row">
						<form method="get">
							{if condition="$store_id elt 0"}
							<div class="col-sm-2 m-b-xs">
								<select class="form-control" name="store_id">
									<option value="0">所属门店</option>
									{foreach name="stores" item="value"}
									<option value="{$value.id}" {if condition="input('store_id')!=null && $value.id == input('store_id')"}selected{/if}>
										{$value.name} 
									</option> 
									{/foreach} 
								</select> 
							</div>
							{else/}
							<input type="hidden" name="store_id" value="{$store_id}">
							{/if}
							<div class="col-sm-3 m-b-xs">
								<div class="input-daterange input-group" id="datepicker">
									<input type="text" class=" form-control" id="start_time" name="start_time" value="{$start_time_str}" placeholder="开始时间" onkeyup="filter(this)"/>
									<span class="input-group-addon">到</span>
									<input type="text" class=" form-control" id="end_time" name="end_time" value="{$end_time_str}" placeholder="结束时间" onkeyup="filter(this)"/>
								</div>
							</div>
							<div class="col-sm-1">
								<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> 确定</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content" style="border-color: #e7eaec;border-width: 4px 0 0;">
					<div class="row">
						<div class="col-sm-3">收入金额：￥{$topData.amount_sum}</div>
						<div class="col-sm-3">订单数量：{$topData.orders_sum}</div>
						<div class="col-sm-3">销售数量：{$topData.sales_sum}</div>
						<div class="col-sm-3">借出数量：{$topData.hires_sum}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>销售统计</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-12">
							<div class="chart">
								<div id="statistics" style="height: 400px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="__PUBLIC__/dist/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/dist/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.js"></script>
<script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="__PUBLIC__/dist/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="__PUBLIC__/dist/js/plugins/peity/jquery.peity.min.js"></script>
<script src="__PUBLIC__/dist/js/demo/peity-demo.min.js"></script>
<script src="__PUBLIC__/dist/js/content.min.js?v=1.0.0"></script>
<script src="__PUBLIC__/dist/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="__PUBLIC__/dist/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="__PUBLIC__/dist/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="__PUBLIC__/dist/js/plugins/easypiechart/jquery.easypiechart.js"></script>
<script src="__PUBLIC__/dist/js/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="__PUBLIC__/dist/js/demo/sparkline-demo.min.js"></script>
<script src="__PUBLIC__/dist/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script>
	$(document).ready(function () { $(".chart").easyPieChart({ barColor: "#f8ac59", scaleLength: 5, lineWidth: 4, size: 80 }); $(".chart2").easyPieChart({ barColor: "#1c84c6", scaleLength: 5, lineWidth: 4, size: 80 }); var data2 = [[gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8], [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4], [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6], [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8], [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6], [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13], [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8], [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]]; var data3 = [[gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700], [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589], [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700], [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786], [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888], [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567], [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900], [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]]; var dataset = [{ label: "订单数", data: data3, color: "#1ab394", bars: { show: true, align: "center", barWidth: 24 * 60 * 60 * 600, lineWidth: 0 } }, { label: "付款数", data: data2, yaxis: 2, color: "#464f88", lines: { lineWidth: 1, show: true, fill: true, fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.2 }] } }, splines: { show: false, tension: 0.6, lineWidth: 1, fill: 0.1 }, }]; var options = { xaxis: { mode: "time", tickSize: [3, "day"], tickLength: 0, axisLabel: "Date", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: "Arial", axisLabelPadding: 10, color: "#838383" }, yaxes: [{ position: "left", max: 1070, color: "#838383", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: "Arial", axisLabelPadding: 3 }, { position: "right", clolor: "#838383", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: " Arial", axisLabelPadding: 67 }], legend: { noColumns: 1, labelBoxBorderColor: "#000000", position: "nw" }, grid: { hoverable: false, borderWidth: 0, color: "#838383" } }; function gd(year, month, day) { return new Date(year, month - 1, day).getTime() } var previousPoint = null, previousLabel = null; $.plot($("#flot-dashboard-chart"), dataset, options); var mapData = { "US": 298, "SA": 200, "DE": 220, "FR": 540, "CN": 120, "AU": 760, "BR": 550, "IN": 200, "GB": 120, }; $("#world-map").vectorMap({ map: "world_mill_en", backgroundColor: "transparent", regionStyle: { initial: { fill: "#e4e4e4", "fill-opacity": 0.9, stroke: "none", "stroke-width": 0, "stroke-opacity": 0 } }, series: { regions: [{ values: mapData, scale: ["#1ab394", "#22d6b1"], normalizeFunction: "polynomial" }] }, }) });
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>

<script src="__PUBLIC__/dist/js/plugins/echarts/echarts-all.js"></script>
<script>
    $('#start_time').datepicker().on('changeDate', function (e) {
        //获取选取的开始时间
        var endTimeStart = $("#start_time").val();
        //设置开始时间
        $('#end_time').datepicker('setStartDate', endTimeStart);
    });
    $('#end_time').datepicker().on('changeDate', function (e) {
        //获取选取的开始时间
        var startTimeStart = $("#end_time").val();
        //设置开始时间
        $('#start_time').datepicker('setEndDate', startTimeStart);
    });
    var res = {$res};
    var myChart = echarts.init(document.getElementById('statistics'), 'macarons');
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        legend: {
            data: ['订单数', '销售数量', '借出数量', '收入金额']
        },
        xAxis: [
            {
                type: 'category',
                data: res.time
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '订单数/销售数/借出数',
                axisLabel: {
                    formatter: '{value}'
                }
            },{
                type: 'value',
                name: '收入金额',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '收入金额',
                type: 'bar',
                yAxisIndex: 1,
                data: res.amount
            }, {
                name: '订单数',
                type: 'line',
                data: res.order
            }, {
                name: '销售数量',
                type: 'line',
                data: res.sales_sum
            }, {
                name: '借出数量',
                type: 'line',
                data: res.hires_sum
            }
        ]
    };

    myChart.setOption(option);
</script>

</html>